
<template>
    <el-container>
        <el-aside class="header" width="15vw">
            <HeadIcon>
            </HeadIcon>
            <AsideNav :classifiData="classifiData" @handle-click="handleNavClick" @delete-class="delClass"
                @add-class="addclass">

            </AsideNav>
        </el-aside>
        <el-aside class="header" width="20vw">
            <ScroBar :currentIndex="currentIndex" :noteData="noteData" @handle-click="handleClick"
                @handle-btn-click="addNote" @delete-note="delNote" :title="classifiData.classifiName">
            </ScroBar>
        </el-aside>
        <el-container>
            <el-header>

                <div class="title">
                    <el-input v-model="noteTitle" :placeholder="placeholder" class="title-input" 
                        style="font-size:x-large;height: 75px;
    border: 0;" @input="onInput">
                    </el-input>
                </div>
                <div class="logo">

                </div>
            </el-header>
            <el-main>
                <v-md-editor v-model="computedNoteContent" height="80vh" @change="handleText" :disabled-menus="[]"
                    @save="saveEvent" @upload-image="handleUploadImage" :include-level="[1,2,3,4]">
                </v-md-editor>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
//import TitleInput from '../components/TitleInput.vue';
import MdEditor from '../components/MdEditor.vue';
import HeadIcon from '../components/HeadIcon.vue';
import ScroBar from '../components/ScroBar.vue';
import AsideNav from '../components/AsideNav.vue';
import $ from "jquery"

export default {
    components: { /*TitleInput,*/ MdEditor, HeadIcon, ScroBar, AsideNav, },
    created() {
        this.$nextTick(() => {
            // this.handleClick()
            this.getClassifiData();
        })

    }, computed: {
        computedNoteTitle() {
            return this.noteData === undefined ? this.noteTitle : this.noteData[this.currentIndex].noteTitle
        },
        computedNoteContent() {
            return this.noteData === undefined ? this.noteContent : this.noteData[this.currentIndex].noteContent
        },


    },
    data() {
        return {
            shareNoteUrl: "https://32y1255s71.zicp.fun/collection/addCollection=",
            url: "",
            text: "",
            classifiData: [{}],
            noteData: [{}],
            token: localStorage.getItem('token'),
            currentIndex: 0,
            currentCIndex: 0,
            placeholder: '请输入标题',
            noteTitle: '',
            noteContent: ''
        }
    }, methods: {
        saveEvent: function (text, html) {

            let data = null;
            if (this.noteData === undefined || text == '') {

                data = { noteContent: ' ',};
                console.log(this.noteContent);
            }else{
                data = this.noteData[this.currentIndex];
                data.noteTitle = this.noteTitle;
                data.noteContent = text;
            }
            console.log(this.noteContent);
            const that = this;
            $.ajax({

                data: data,
                url: "/note/update",
                success: function (res) {
                    that.openMsg(res.data.msg, 'success')

                }
            })
        },
        //编辑器上传图片
        handleUploadImage(event, insertImage, files) {
            for (let i in files) {
                const formData = new FormData();
                formData.append('file', files[i]);

                $.ajax({
                    data: formData,
                    url: '/oss/uploadOneFile',
                    type: "post",
                    success: function (res) {

                        insertImage({
                            url: res,
                            desc: 'DESC',
                        })
                    }, processData: false,
                    contentType: false,

                })
            }
        },
        handleNavClick: function (index) {
            this.currentCIndex = index;
            this.currentIndex  = 0;
            this.noteTitle = '';
            this.getNoteData()
        },
        //获得分区数据
        getClassifiData: function () {
            const that = this;
            $.ajax({
                url: this.url + "/noteclassific/queryNoteclassific",
                type: "post",
                headers: {

                },
                success: function (data) {
                    that.classifiData = data.data
                    console.log(that.classifiData)
                    if(that.classifiData.length !== 0)
                    {
                        that.getNoteData()
                    }
                       
                },
                error: function (error) {

                }
            })
        },
        getNoteData: function () {
            const that = this;
            
            $.ajax({
                data: { 'classId': that.classifiData[that.currentCIndex].classificID },
                url: "/note/queryNoteList",
                success: function (res) {
                    that.noteData = res.data

                    if (that.noteData.length === 0) {
                        that.noteData = undefined;
                    } else {
                        that.getNote(that.noteData[0].noteId)
                        that.noteTitle = that.noteData[that.currentIndex].noteTitle;
                    }

                }
            })
        },
        getNote: function (id) {//通过ID查笔记

            const that = this;
            $.ajax({
                data: {
                    'noteId': id,//笔记ID
                },
                url: "/note/qureyNoteById",
                success: function (res) {

                    that.noteData[that.currentIndex] = res.data;


                }
            })
        },
        addNote: function (title) {
            const that = this;


            $.ajax({
                type: "post",
                data: {
                    'classificID': that.classifiData[that.currentCIndex].classificID,
                    'noteTitle': title,
                    'noteContent': ' '
                },
                url: "/note/addNote",
                success: function (res) {
                    that.openMsg(res.data.msg, 'success')
                    that.getNoteData()
                },
            })



        },
        handleClick(index) {

            this.currentIndex = index;

            this.getNote(this.noteData[index].noteId)
        },
        updateNote: function () {//更新笔记
            const that = this;
            $.ajax({
                data: {
                    'noteID': "",//笔记ID
                    'noteContent': "",//笔记内容
                    'classificID': that.classifiData[that.currentCIndex].classificID,//分区ID
                },
                url: "/note/update",
                success: function (res) {
                    that.openMsg(res.data.msg, 'success')

                },
            })
        },
        updateTitle: function () {//更新标题
            const that = this;
            $.ajax({
                data: {
                    'noteID': "",//笔记ID
                    'noteTitle': "",//笔记标题
                },
                url: "/note/update",
                success: function (res) {
                    that.openMsg(res.data.msg, 'success')

                },
            })
        },
        delNote: function (id) {//删除笔记
            const that = this;


            $.ajax({
                data: {
                    'ids': id,//笔记ID
                },
                url: "/note/delNote",
                success: function (res) {

                    that.openMsg(res.data.msg, 'success')
                    that.currentIndex = 0;
                    that.noteContent = '';
                    that.noteTitle = '';
                    that.getNoteData();
                },
            })
        },
        shareNote: function () {//分享笔记
            const that = this;
            $.ajax({
                data: {
                    'noteId': 4,             //笔记ID
                },
                url: "/note/shareNote",
                success: function (res) {


                    that.upMsg("分享链接", that.shareNoteUrl + res.data.shareNoteId)
                    // that.openMsg(res.data.msg,'success')

                },
            })
        }, openMsg: function (msg, result) {
            this.$message({
                message: msg,
                type: result
            });
        }, upMsg: function (title, content) {

        }, addclass: function (formname) {//增加分区
            const that = this;

            $.ajax({
                data: {
                    'classifiName': formname,//分区名字
                    'classifiDesc': "",//分区描述
                },
                url: "/noteclassific/addNoteclassific",
                success: function (res) {
                    that.openMsg(res.data.msg, 'success');
                    that.getClassifiData();
                },
            })
        },
        updateClass: function () {
            const that = this;
            $.ajax({
                data: {
                    'classificID': "",//分区ID
                    'classifiName': "",//分区名字
                    'classifiDesc': "",//分区描述
                },
                url: "/noteclassific/updateNoteclassific",
                success: function (res) {
                    that.openMsg(res.data.msg, 'success')

                },
            })
        },
        delClass: function (id) {//删除笔记
            const that = this;
            $.ajax({
                data: {
                    'classificID': id,//分区ID
                },
                url: "/noteclassific/delNoteclassific",
                success: function (res) {
                    that.openMsg(res.data.msg, 'success')
                    that.currentCIndex = 0;
                    that.currentIndex = 0;
                    that.noteContent = '';
                    that.noteTitle = '';
                    that.getClassifiData();
                },
            })
        },

    }
}

</script>

<style scoped>
.title {
    width: 50%;
}

.title>>>.el-input__wrapper {
    border: 0;
    box-shadow: none;
}
</style>



